<template>
  <!-- 日期  -->
  <div>
    <span>{{ nowDate }}</span>
    <span>{{ nowTime }}</span>
    <span>{{ nowWeek }}</span>
  </div>
</template>

<script>
export default {
  name: 'data-component',
  data() {
    return {
      timer: null, // 计时器
      nowDate: '', // 日期
      nowTime: '',
      nowWeek: ''
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);
  },
  methods: {
    setNowTimes() {
      const myDate = new Date();
      // console.log(myDate)
      const wk = myDate.getDay();
      const yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      mm = String(mm < 10 ? '0' + mm : mm);
      const dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
      const hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
      const min = String(
        myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes()
      );
      const sec = String(
        myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds()
      );
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const week = weeks[wk];
      this.nowDate = yy + '-' + mm + '-' + dd;
      this.nowTime = hou + ':' + min + ':' + sec;
      this.nowWeek = week;
    }
  }
};
</script>

<style scoped>
div > span {
  margin-right: 0.5em;
}
</style>
